<!doctype html>
<meta charset=utf-8>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Ridge Border Tester</title>

<table>
	<thead>
		<tr><th>Color<th>Solid<th>Ridge<th>Chrome<th>Firefox<th>Actual Colors
	</thead>
	<tr style="--color: black">
		<th>black
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=black-chrome.png>
		<td><img src=black-firefox.png>
		<td>Chrome: #545454 / #000
			<br>Firefox: #b2b2b2 / #4c4c4c
	<tr style="--color: #111">
		<th>#111
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=111-chrome.png>
		<td><img src=111-firefox.png>
		<td>Chrome: #656565 / #000
			<br>Firefox: #111 / #0b0b0b
	<tr style="--color: #888">
		<th>#888
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=888-chrome.png>
		<td><img src=888-firefox.png>
		<td>Chrome: #888 / #343434
			<br>Firefox: #888 / #5b5b5b
	<tr style="--color: #eee">
		<th>#eee
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=eee-chrome.png>
		<td><img src=eee-firefox.png>
		<td>Chrome: #eee / #9a9a9a
			<br>Firefox: #eee / #9f9f9f
	<tr style="--color: white">
		<th>white
		<td><div class="border solid"></div>
		<td><div class="border ridge"></div>
		<td><img src=white-chrome.png>
		<td><img src=white-firefox.png>
		<td>Chrome: #fff / #ababab
			<br>Firefox: #fff / #aaa
</table>
<style>
table {
	--size: 20px;
}
td {
	padding: .5em;
}
img {
	display: block;
	width: calc(3 * var(--size));
	height: calc(3 * var(--size));
}
div.border {
	width: var(--size);
	height: var(--size);
	border: var(--size) var(--color);
	border-radius: var(--size);

	&.solid {
		border-style: solid;
	}
	&.ridge { 
		border-style: ridge;
	}
}
td:has(div.border) {
	background: repeating-linear-gradient(45deg, #eee 0 5px, #ddd 5px 10px);
}
</style>